<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>完善资料</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/register.css">
</head>
<body>
    <div class="register-form">
        <form method="post" action="" onsubmit="return false" id="form1" autocomplete="off">
            <div class="form-item">
                <label class="form-label"><span>*</span><span>姓名</span></label>
                <input class="text-input" type="text" id="Name" name="Name" placeholder="请填写您的真实姓名">
                <div data-index='0' class="error-mes"></div>
            </div>
            <div class="form-item">
                <label class="form-label"><span>*</span><span>电子邮箱</span></label>
                <input class="text-input" type="text" id="Email" name="Email" placeholder="请输入您的常用邮箱地址">
                <div data-index='1' class="error-mes"></div>
            </div>
            <div class="form-item">
                <label class="form-label"><span>*</span><span>设置登录密码</span></label>
                <input class="text-input" type="text" id="passWord" name="passWord" placeholder="6到16个人字符（字母、数字、符号），区分大小写">
                <div data-index='2' class="error-mes"></div>
            </div>
            <div class="form-item">
                <label class="form-label"><span>*</span><span>从事行业</span></label>
                <input class="text-input" type="text" id="Industry" name="Industry" placeholder="请选择您所从事的行业" value="">
                <div data-index='3' class="error-mes"></div>
            </div>
            <div class="form-item">
                <label class="form-label"><span>*</span><span>主营产品</span></label>
                <input class="text-input" type="text" id="mainProduct" name="mainProduct" placeholder="请选择您公司所主营的产品类型">
                <div  data-index='4' class="error-mes"></div>
            </div>
            <div class="form-item">
                <label class="form-label"><span>*</span><span>联系电话</span></label>
                <input class="text-input" type="text" id="Mobile" name="Mobile" placeholder="请输入您的联系电话">
                <div data-index='5' class="error-mes"></div>
            </div>
            <div class="form-item">
                <label class="form-label"><span>*</span><span>工作性质</span></label>
                <input class="text-input" type="text" id="jobNature" name="jobNature" placeholder="请选择您的工作性质">
                <div data-index='6' class="error-mes"></div>
            </div>
            <div class="form-item">
                <label class="form-label"><span>*</span><span>单位性质</span></label>
                <input class="text-input" type="text" id="compNature" name="compNature" placeholder="请选择您的单位性质">
                <div data-index='7' class="error-mes"></div>
            </div>
            <div class="form-item">
                <label class="form-label"><span>*</span><p><img onclick="$(this).attr('src', 'http://passport.chuandong.com/vcode.aspx?code=reg'+'&r='+Math.random());" alt="点击换验证码" src="http://passport.chuandong.com/vcode.aspx?code=reg" class="yz" id="validcode" />
                    <a class="change-code" href="javascript:void(0);" onclick="$('#validcode').attr('src', 'http://passport.chuandong.com/vcode.aspx?code=reg&r='+Math.random());" >看不清楚？换张图片</a></p></label>
                <input data-index='8' class="text-input" type="text" id="checkCode" name="checkCode" placeholder="请输入上图验证码">
                <div class="error-mes"></div>
            </div>
            <div class="form-item">
                <label class="checkBox"><input type="checkbox" name="check" id="" value="免费订阅电子杂志">免费订阅电子杂志</label>
                <label class="checkBox"><input type="checkbox" name="check" value="我已经看过并同意">我已经看过并同意<a href="">《传动网网络服务使用协议》</a></label>
                <input class="" id="RelatedBut1" type="submit">
            </div>
        </form>
    </div>
    <div class="mask"></div>
    <div class="dialog">
        <ul>
            <li data-index='0'>电子制造</li>
            <li data-index='1'>纺织机械</li>
            <li data-index='2'>包装机械</li>
            <li data-index='3'>塑料机械</li>
            <li data-index='4'>烟草机械</li>
            <li data-index='5'>医疗设备</li>
            <li data-index='6'>供水处理</li>
            <li data-index='7'>机床</li>
            <li data-index='8'>起重机械</li>
            <li data-index='9'>电梯设备</li>
            <li data-index='10'>建材机械</li>
            <li data-index='11'>造纸设备</li>
            <li data-index='12'>冶金设备</li>
            <li data-index='13'>石化</li>
            <li data-index='14'>电力设备</li>
            <li data-index='15'>轨道交通</li>
            <li data-index='16'>轨道交通</li>
            <li data-index='17'>电力设备</li>
            <li data-index='18'>轨道交通</li>
            <li data-index='19'>轨道交通</li>
        </ul>
        <button class="comfim">确定</button>
    </div>
    <script type="text/javascript" src="http://img.chuandong.com/common/script/jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script>
        $('.mask').hide()
        $('#Industry').focus(function () {
            $('.mask').show()
            $('.dialog').show()
        })
        
        var myMap = new Map()
        for (let i=0;i<$('.dialog li').length;i++) {
            $('.dialog li').eq(i).click(function () {
                var index = $('.dialog li').eq(i).data('index')
                if ($('.dialog li').eq(i).hasClass('chosed')) {
                    $('.dialog li').eq(i).removeClass('chosed')
                    myMap.delete(index)
                    console.log('shanchu',myMap)
                } else {
                    $('.dialog li').eq(i).addClass('chosed')
                    myMap.set(index,$('.dialog li').eq(i).text())
                    console.log('znengjia',myMap)
                }
            })
        }

        $('.comfim').click(function () {
            $('.dialog').hide()
            $('.mask').hide()
            var arr = []
            myMap.forEach(function(value, key) {
                arr.push(value)
            });
            $('#Industry').val(arr)
        })
    </script>
    <script type="text/javascript">
        $('#RelatedBut1').click(function () {
            var name = $('#Name').val();
            var email = $('#Email').val();
            var passWord = $('#passWord').val();
            var industry = $('#Industry').val();
            var mainProduct = $('#mainProduct').val();
            var mobile = $('#Mobile').val();
            var jobNature = $('#jobNature').val();
            var compNature = $('#compNature').val();
            var checkCode = $('#checkCode').val();
            var index = $('.error-mes').data('index')
            
            if (name == "") {
                $('.error-mes').eq(0).text('请填名称！')
                $("#Name").focus();
                return false;
            } else {
                $('.error-mes').eq(0).text('')
            }
            if (email == "") {
                $('.error-mes').eq(1).text('请填写邮箱！')
                $("#Email").focus();
                return false;
            } else {
                $('.error-mes').eq(1).text('')
            }
            if (!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(email)) {
                $('.error-mes').eq(1).text('邮箱地址输入有误!')
                $('#Email').focus();
                return false;
            } else {
                $('.error-mes').eq(1).text('')
            }
            if (passWord == "") {
                $('.error-mes').eq(2).text('请设置登录密码！')
                $('#passWord').focus();
                return false;
            } else {
                $('.error-mes').eq(2).text('')
            }
            if (industry == "") {
                $('.error-mes').eq(3).text('请选择从事行业！')
                $("#Industry").focus();
                return false;
            } else {
                $('.error-mes').eq(3).text('')
            }
            if (mainProduct == "") {
                $('.error-mes').eq(4).text('请选择主营产品！')
                $("#mainProduct").focus();
                return false;
            } else {
                $('.error-mes').eq(4).text('')
            }
            if (mobile == "") {
                $('.error-mes').eq(5).text('请填写电话！')
                $('#Mobile').focus();
                return false;
            } else {
                $('.error-mes').eq(5).text('')
            }
            if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(mobile)) {
                $('.error-mes').eq(5).text('手机号码输入有误!')
                $('#Mobile').focus();
                return false;
            } else {
                $('.error-mes').eq(5).text('')
            }
            if (jobNature == "") {
                $('.error-mes').eq(6).text('请选择工作性质！')
                $("#jobNature").focus();
                return false;
            } else {
                $('.error-mes').eq(6).text('')
            }
            if (compNature == "") {
                $('.error-mes').eq(7).text('请选单位性质！')
                $("#compNature").focus();
                return false;
            } else {
                $('.error-mes').eq(7).text('')
            }
            if (checkCode == "") {
                $('.error-mes').eq(8).text('请填写验证码！')
                $("#checkCode").focus();
                return false;
            } else {
                $('.error-mes').eq(8).text('')
            }
            // if (checkCode !== $("#validcode")[0].src) {
            //     console.log('验证码',$("#validcode").attr("src","http://passport.chuandong.com/vcode.aspx?code=reg?code=reg&" +Math.random()))
            //     $('.error-mes').eq(8).text('验证码输入错误！')
            //     $('#checkCode').focus();
            //     return false;
            // } else {
            //     $('.error-mes').eq(8).text('')
            // }
            // $.post('', $('#form1').serialize(), function (data) {
            //     if (data) {
            //         data = $.parseJSON(data);
            //     }
            // });
        });
    </script>
</body>
</html>